<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- InstanceBegin template="/Templates/home-template.dwt" codeOutsideHTMLIsLocked="false" -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>纯净水世界</title>
    <link rel="stylesheet" href="stylesheets/userinfo.css" />
    <link rel="stylesheet" href="layui/css/layui.css" />
    <style>
        .Navigation-bar {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
            background-color: #1e9fff;
        }
    </style>
</head>

<body>
    <div>
        <!-- 导航栏 -->
        <div class="Navigation-bar">
            <div><img src="/images/Water_World.png" height="60px" /></div>
            <ul class="layui-nav layui-bg-blue" lay-bar="disabled">
                <li class="layui-nav-item"><a href="./">首页</a></li>
                <li class="layui-nav-item"><a href="">菜单1</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">更多</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">选项1</a></dd>
                        <dd><a href="">选项2</a></dd>
                        <dd><a href="">选项3</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <% if (_username=='-null' ){ %>
                        <a href="/login">登录</a>
                        <% }else{ %>
                            <a href="#">
                                欢迎您，<%=_username %>
                            </a>
                            <% } %>
                </li>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="container">
            <!-- InstanceBeginEditable name="MainBody" -->
            <br>
            <br>
            <br>

            <div class="xgs-row">

                <div class="xgs-col3" style="height: 300px;">
                    <ul class="navtab">
                        <li>
                            <a href="./">
                                <<返回首页 </a>
                        </li>
                        <li>
                            <a style="background-color: #69c0ff;color: white;" href="javascript:void(0);"
                                onclick="jumpTab('myinfo',this)">我的信息</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" onclick="jumpTab('cart',this)">
                                订单信息
                                <span style="border-radius: 50%;background-color: #ff4d4f;width: 12px;display: block;">
                                </span>
                            </a>
                        </li>
                        <li><a href="javascript:void(0);" onclick="jumpTab('updatePassword',this)">修改密码</a></li>
                        <li><a href="/userinfo/loginOut">退出登录</a></li>
                    </ul>
                </div>

                <div class="xgs-col8  white-panel" style="padding: 0 15px;">
                    <!-- 我的信息 -->
                    <div class="myinfo" id="myinfo" style="padding: 25px 0 20px;">
                        <div class="top content" style="border-bottom: 1px solid #d9d9d9;height: 120px;">
                            <img src="/images/Water_World.png" class="white-panel float-left" width="100px"
                                style="border-radius: 50%;border: #f5f5f5 1px solid;margin-top: 35px;">
                            <div
                                style="width: 75%;display: inline-block;margin-top: 35px;padding-left: 30px;line-height: 28px;">
                                <h3>
                                    <%= _username %>
                                </h3>
                                <small>个人说明...</small>
                                <br />
                                <span>学校编号：<%= DB[0].SchoolID %> / 园区编号：<%= DB[0].Dorm_AreaID %> / 楼栋编号：
                                            <%=DB[0].Dorm_BuildID %> / 宿舍编号：<%= DB[0].Dorm_RoomID %> /</span>
                            </div>
                        </div>
                        <br>
                        <!-- 消息列表 -->
                        <div class="bottom">
                            <ul class="notice-list">
                                <!-- <h3>消息列表</h3> -->
                                <li>
                                    <h4>系统消息</h4>
                                    <span>您关注的《农夫山泉》上新啦，快来围观~</span>
                                </li>
                                <li>
                                    <h4>登录通知</h4>
                                    <span>登录IP地址改变，请核实是否本人登录，如有异常，请联系客服处理！</span>
                                </li>
                                <li>
                                    <h4>交易消息</h4>
                                    <span>您的订单已打印，请及时处理！</span>
                                </li>
                            </ul>
                        </div>

                        <!-- /消息列表 -->
                        <!-- /我的信息 -->
                    </div>




                    <!-- 订单信息 -->

                    <div class="cart content" id="cart" style="display: none;">
                        <% DB.forEach (function (item, iindex) { %>
                            <div class="xgs-row">
                                <div class="xgs-col2 pic">
                                    <img src="<%= item.CommodityImg %>">
                                </div>
                                <div class="xgs-col10 cart-item">
                                    <h4 style="font-size: 20px; padding-bottom: 5px;">
                                        <%= item.CommodityName %>
                                    </h4>
                                    <span>数量：<%= item.Quantity %></span>
                                    <br />
                                    <span>下单时间：<%= item.Time.toLocaleString() %>
                                    </span><!-- .toLocaleString()是将存储的时间转化成本地时间 如《Fri Dec 01 2023 00:02:21 GMT+0800 (中国标准时间)》转化成《2023/12/1 00:02:21》 -->
                                    &nbsp;
                                    <span class="price">消费金额：<%= item.Total %></span>
                                    <% if (item.State=='0' ){ %>
                                    <br />
                                    <span class="price" style="color: lightslategrey; margin-left: 10vw;">等待商家接单中~~</span>
                                    <% } %>
                                    <div class="operation">
                                        <% if (item.State=='0' ){ %>
                                            <a class="cart-submit"
                                                href="/userinfo/cancel?id=<%= item.OrderID %>" style="background-color: #A1C1A9;">取消订单</a>
                                            <% } else if (item.State=='-1' ){ %>
                                                <a class="cart-submit"
                                                    style="cursor: default; background-color: rgba(238, 153, 153, 0.87);">商家拒单</a>
                                                <% } else if (item.State=='1' ){ %>
                                                    <a class="cart-submit"
                                                        style="cursor: default; background-color: rgba(30, 153, 255, 0.5);">已接单</a>
                                                    <% } else if (item.State=='2' ){ %>
                                                        <a class="cart-submit"
                                                            style="cursor: default; background-color: rgba(255, 184, 0, 0.5);">派送中</a>
                                                        <% } else if (item.State=='3' ){ %>
                                                            <a class="cart-submit"
                                                                style="cursor: default; background-color: rgba(22, 186, 170, 0.5);">已完成</a>
                                                            <% } %>

                                    </div>
                                </div>
                            </div>
                            <% }); %>
                    </div>
                    <!-- /购物车 -->
                    <!-- 修改密码 -->
                    <div class="updatePassword" id="updatePassword" style="display: none;">
                        <br>
                        <br>
                        <br>
                        <form action="/userinfo/UpdataPwd" method="post" class="form">
                            <div class="form-item">
                                <span>旧密码：</span><input type="text" name="old_password" id="" value="" />
                            </div>
                            <div class="form-item">
                                <span>新密码：</span><input type="password" name="password" />
                            </div>
                            <div class="form-item">
                                <span>确认密码：</span><input type="password" name="password2" />
                            </div>
                            <div class="btn-goup">
                                <button type="submit" class="submit-btn" style="cursor: pointer;">提交</button>
                                <button type="reset" class="submit-btn" style="cursor: pointer;">重置</button>
                            </div>
                        </form>
                    </div>
                    <!-- /修改密码 -->

                </div>

            </div>
        </div>
        <!-- InstanceEndEditable -->
    </div>
    <div class="footer">
        <div class="foot-body" style="margin: auto;width: 61%;">
            <ul>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">关于我们</a></li>
                <li>客服QQ：806729185</li>
                <li>客服微信：hwh-lgc</li>
            </ul>
            <p style="color: white;clear: left;text-align: center;">
                Copyright © 2012-2021 Tencent. All Rights Reserved.
            </p>
        </div>
    </div>


    <script>
        // tag切换面板
        function jumpTab(name, obj) {
            // 初始化选中的tag页
            var item = document.getElementById(name);
            var parentNodes = item.parentNode.childNodes;
            var parentLen = parentNodes.length
            for (var i = 0; i < parentLen; i++) {
                var thisClassName = parentNodes[i].className
                // console.log(parentNodes[i])
                // 获取所有子节点会包括注释等标签，用判断方式判断这个标签是否又类名，有说明他是一个dom对象
                if (thisClassName != null && thisClassName != "") {
                    parentNodes[i].style.display = 'none';
                    // console.log(parentNodes[i].className)
                }
            }
            item.style.display = 'block';

            // 初始化tag导航的样式
            var tagNavNodes = obj.parentNode.parentNode.childNodes // 获取LI标签
            var tagNavLen = tagNavNodes.length
            for (var i = 0; i < tagNavLen; i++) {
                if (tagNavNodes[i].tagName === "LI" || tagNavNodes[i].tagName === "li") {
                    // 因为子节点可能会有多个a标签，我们只需要获取第一个即可
                    var nowObj = tagNavNodes[i].getElementsByTagName("a")[0];
                    nowObj.style.color = "";
                    nowObj.style.backgroundColor = "";
                }
            }

            obj.style.color = "white";
            obj.style.backgroundColor = "#69c0ff";
        }
    </script>
</body>

<!-- InstanceEnd -->

</html>